import React, { PureComponent } from "react";
import s from "./index.scss";
import { Flex } from "antd-mobile";




import { Tabs} from 'antd-mobile';

const tabs = [
  { title: '借款信息', sub: '1' },
  { title: '风险保障', sub: '2' },
  { title: '还款计划', sub: '3' },
  { title: '投资记录', sub: '4' }
];

import TabOne from './TabOne'
import TabTwo from './TabTwo'

import TabThree from './TabThree'
import TabFour from './TabFour'


import baoxian2 from "assets/images/threeapp/baoxian2.png";





export default class extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      
      
    };
  }
  
  componentDidMount() {
    $('.botBox').parent().css({height:'100vh','min-height':'100vh',clear:'both',"padding-bottom":"0.56rem"})
  }
   //销毁时解绑事件
  componentWillUnmount() {
    //重写组件的setState方法，直接返回空
    this.setState = (state,callback)=>{
      return;
    };  
  }
  
  

  render() {
    let {detail,detail2} = this.props
    return (
      
    <div className={`botBox`} style={{height:'100%',width:'100%',clear:'both',}}>
        <Tabs tabs={tabs}
        style={{display:'flex'}}
      initialPage={0}
      onChange={(tab, index) => { console.log('onChange', index, tab); }}
      onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
    >
      <div style={{display:'flex'}}>
         <TabOne detail2={detail2}/>
      </div>
      <div style={{display:'flex'}}>
         <TabTwo/>
      </div>
      <div>
      <TabThree props={this.props.props}/>
      </div>
      <div>
      <TabFour props={this.props.props} detail={detail}/>
      </div>
    </Tabs>
        </div>
        
        
     
       
        
    );
  }
}
